import { NavBar, Space } from "antd-mobile";
import { useNavigate } from 'react-router-dom'
import { MoreOutline, AddOutline } from 'antd-mobile-icons'

function Nav({ title }) {
    const navigate = useNavigate()

    const right = (
        <div style={{ fontSize: '0.5rem' }}>
            <Space>
                {title == '健康'
                    ? <AddOutline onClick={() => { navigate('/options/selectDevice') }} />
                    : <MoreOutline />}
            </Space>
        </div>
    )

    const back = () => {
        if (window.history.state && window.history.state.idx > 0) {
            navigate(-1)
        } else {
            navigate('/home/index')
        }
    }


    return (
        <NavBar
            style={{ color: '#000', height: '1.2rem', backgroundColor: '#fff', position: 'sticky', top: 0, zIndex: 999 }}
            right={right}
            onBack={back}
        >
            <span style={{ fontWeight: 700, fontSize: '0.5rem' }}>{title}</span>
        </NavBar>
    );
}

export default Nav;